<template>
	<view class="main">
		<view class="background">
			<image class="backgroundimage" src="../../../static/images/topback.png" mode="aspectFit"></image>
			<view class="user_top">
				<view class="head">
					<image :src="userinfo.head" mode="aspectFit"></image>
				</view>
				<view class="name">
					{{userinfo.name}}
				</view>
				<view class="condition">
					<image :src="cond==true?'../../../static/images/work_1.png':'../../../static/images/work.png'"
						mode=""></image>
				</view>

				<view class="condition" v-if="cond==true">
					<image :src="cond==false?'../../../static/images/rest_1.png':'../../../static/images/rest.png'"
						mode=""></image>
				</view>
				<view class="condition" v-if="cond==false">
					<image src="../../../static/images/rest_1.png" mode=""></image>
				</view>
			</view>
			<view class="commute">
				<view class="work">
					<image :src="cond==true?'../../../static/images/work_1.png':'../../../static/images/work.png'"
						mode="" @click="change()"></image>
					<view class="work_t">
						上班
					</view>
				</view>

				<view class="work">
					<image :src="cond==false?'../../../static/images/rest_1.png':'../../../static/images/rest.png'"
						mode="" @click="change()"></image>
					<view class="work_t">
						休息
					</view>
				</view>
			</view>
			<view class="voice">
				<view class="hint">
					<image src="../../../static/images/voice.png" mode=""></image>
					<text>
						语音提示
					</text>
				</view>
				<u-switch v-model="checked" active-color="red" size="35" @change="voiceprompts()" inactive-color="#eee">
				</u-switch>
			</view>
		</view>
		<view class="operating">
			<view class="operate" v-for="(operates,index) in operate" :key="index" @click="router(operates.url)">
				<view class="o_left">
					<view class="info">
						<image mode="aspectFit" :src="operates.image">
					</view>
					</image>
					<text>{{operates.title}}</text>
				</view>
				<u-icon name="arrow-right" color="#CCCCCC " size="28"></u-icon>
			</view>
		</view>
		<view class="bottom" @click="back('/pages/logins/login/login')">
			退出登录
		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				checked: true,
				cond: true,
				userinfo: "", //用户信息
				operate: [{
						id: 1,
						image: "../../../static/images/money.png",
						title: "提现",
						url: '/pages/users/withdraw/withdraw'

					},
					{
						id: 2,
						image: "../../../static/images/statistics.png",
						title: "订单统计",
						url: '/pages/users/census/census',
					},
					{
						id: 3,
						image: "../../../static/images/certification.png",
						title: "我的认证",
						url: '/pages/users/certification/certification',

					},
					{
						id: 4,
						image: "../../../static/images/set.png",
						title: "修改密码",
						url: '/pages/users/set_password/set_password',

					},
				]
			}
		},
		onLoad() {

		},
		onShow() {
			this.getunserinfo()
		},
		methods: {
			//getunserinfo获取用户信息
			getunserinfo() {
				global.$http.request({
					url: '/api/rider_user/rider_infor',
					data: {
						token: uni.getStorageSync('token'),
					}
				}).then(res => {
					console.log(res);
					if (res.data.code == 0) {
						this.userinfo = res.data.data
						console.log('有token', this.userinfo);
					}
				})
			},
			//骑手是否上班
			change() {
				this.cond = !this.cond
				console.log(Number(this.cond));
				global.$http.request({
					url: '/api/rider_user/is_open',
					data: {
						token: uni.getStorageSync('token'),
						type: Number(this.cond)
					}
				}).then(res => {
					uni.showToast({
						title: res.data.msg,
						icon: "none",
						mask: true,
						duration: 1000
					})
				
				})
			},
			//是否开启语音提示
			voiceprompts() {
				global.$http.request({
					url: '/api/rider_user/is_voice',
					data: {
						token: uni.getStorageSync('token'),
						type: this.checked
					}
				}).then(res => {
					uni.showToast({
						title: res.data.msg,
						icon: "none",
						mask: true,
						duration: 1000
					})
				})
			},
			//退出登录
			back(path) {
				var that = this
				try {
					this.userinfo.name = "未登录"
					this.userinfo.head = ""
					uni.showToast({
						title: '退出成功',
						icon: "none",
						mask: true,
						duration: 1000
					})

					uni.clearStorageSync();
					setTimeout(function() {
						that.router(path)
					}, 2000)

				} catch (e) {
					// error
				}
			},
			//跳转页面
			router(path) {
				// console.log(path)
				uni.navigateTo({
					url: path
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		font-family: PingFang SC;
		background-color: #f7f7f7;

		.main {
			width: 750rpx;

			.background {

				// width: 750rpx;
				// background-image: url(../../../static/images/tabBar/topback.png);
				// height: 400rpx;
				// border-radius: 0 0 100rpx 100rpx;
				.backgroundimage {
					width: 750rpx;
					height: 400rpx;
					position: absolute;
					z-index: -1;
				}

				.user_top {
					overflow: hidden;
					padding: 112rpx 60rpx 0 60rpx;

					.head {
						float: left;
						width: 120rpx;
						height: 120rpx;
						background: #EBF1F7;
						border: 2rpx solid #FFFFFF;
						border-radius: 50%;
						overflow: hidden;

						image {
							width: 120rpx;
							margin: 0 auto;
							display: block;
							height: 120rpx;
						}
					}

					.name {
						float: left;
						width: 102rpx;
						height: 32rpx;
						font-size: 34rpx;
						font-weight: bold;
						color: #FFFFFF;
						margin: 44rpx 29rpx;
					}

					.condition {
						float: left;
						width: 88rpx;
						padding: 40rpx 120rpx 0rpx 10rpx;

						image {
							float: left;
							display: block;
							width: 88rpx;
							height: 88rpx;
						}
					}
				}

				.commute {
					margin: 28rpx auto 8rpx auto;
					display: flex;
					justify-content: space-around;
					align-items: center;
					width: 710rpx;
					// height: 88rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(116, 116, 116, 0.3);
					border-radius: 20rpx;
					font-size: 28rpx;
					color: #ABABAB;
					font-family: PingFang SC;
					font-weight: 400;

					.work {
						display: flex;
						align-items: center;

						// padding: 8rpx 0;
						image {
							width: 88rpx;
							height: 88rpx;
						}
					}
				}

				.commute .work:first-child {
					color: #33AAFC !important;
				}

				.voice {
					width: 710rpx;
					margin: 0 auto 8rpx auto;
					height: 88rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(116, 116, 116, 0.3);
					border-radius: 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 20rpx;

					.hint {
						display: flex;
						align-items: center;

						image {
							width: 32rpx;
							height: 48rpx;
						}

						text {
							padding-left: 28rpx;
						}
					}

				}
			}



			.operating {
				width: 710rpx;
				margin: 0 auto;
				box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(116, 116, 116, 0.3);
				border-radius: 20rpx;

				.operate {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20rpx 12rpx;
					background: #FFFFFF;
					margin-top: 1rpx;

					.o_left {
						display: flex;
						align-items: center;

						.info {
							width: 50rpx;
						}

						image {
							width: 48rpx;
							height: 48rpx;
						}

						text {
							padding-left: 20rpx;
							font-size: 28rpx;
							font-weight: 400;
							color: #000000;
							line-height: 30px;
							text-align: left;
						}
					}
				}

			}

			.operate:first-child {
				border-radius: 20rpx 20rpx 0 0;

			}

			.operate:last-child {
				border-radius: 0 0 20rpx 20rpx;

			}

			.bottom {
				width: 750rpx;
				margin-top: 208rpx;
				text-align: center;
				background: #FFFFFF;
				padding: 31rpx;
				box-shadow: 0rpx 0rpx 4rpx 0rpx rgba(0, 0, 0, 0.25);
				opacity: 0.5;
				font-size: 28rpx;
				font-weight: 400;
				color: #666666;
				line-height: 30rpx;
			}
		}

	}
</style>
